<script lang="ts">
	import { user, type User } from '$lib/AniList/user';
	import HeadTitle from '$lib/HeadTitle.svelte';
	import { estimatedDayReading } from '$lib/Media/Manga/time';
	import { onMount } from 'svelte';

	export let data;

	let userData: User | undefined = undefined;

	onMount(() => {
		user(data.username).then((profile) => {
			userData = profile;
		});
	});

	// 8.5827814569536423841e0
</script>

<HeadTitle route={`${data.username}'s Profile`} path={`/user/${data.username}`} />

<div class="card">
	{#if userData === null}
		Could not load user profile for <a
			href={`https://anilist.co/user/${data.username}`}
			target="_blank">@{data.username}</a
		>.

		<p />

		Does this user exist?
	{:else if userData === undefined}
		Loading user ... 50%
	{:else}
		<div class="user-grid">
			<a
				href={`https://anilist.co/user/${userData.name}`}
				target="_blank"
				title={String(userData.id)}
			>
				<img src={userData.avatar.large} alt="" width="100vw" />
			</a>

			<div>
				<p>
					<a
						href={`https://anilist.co/user/${userData.name}`}
						target="_blank"
						title={String(userData.id)}>@{userData.name}</a
					>
					<span class="click-item">•</span> <a href={`/user/${userData.name}/badges`}>Badge Wall</a>
				</p>

				This user has watched {(userData.statistics.anime.minutesWatched / 60 / 24).toFixed(1)} days
				of anime and read
				{estimatedDayReading(userData.statistics.manga.chaptersRead).toFixed(1)} days of manga.
			</div>
		</div>
	{/if}
</div>

<style>
	.user-grid {
		display: flex;
		flex-wrap: wrap;
		column-gap: 1.5em;
	}

	.click-item {
		margin: 0 0.625rem;
	}
</style>
